@import "../commons/variables.scss";
@import "../commons/px2rem.scss";

.juheh5-idcard {
    .account-header {
        border-top-left-radius: px2rem(8);
        border-top-right-radius: px2rem(8);
        height: px2rem(64);
        line-height: px2rem(64);
        text-align: center;
        font-size: px2rem(32);
        color: #d8d8db;
        font-weight: 400;
        padding-top: px2rem(20);
    }

    .account-content {
        // background-color: #fff;
        width: 85%;
        height: auto;
        margin: px2rem(35) auto;

        .account-list {
            position: relative;
            width: 100%;
            height: auto;

            .account-item {
                border-radius: px2rem(8);
                margin: px2rem(18) auto;
                width: 100%;
                height: px2rem(80);
                box-sizing: border-box;
                background-color: #31323e;

                .item-content {
                    display: flex;
                    width: 100%;
                    height: 100%;
                    justify-content: center;
                    align-items: center;

                    .account-item-info {
                        flex: 3;
                        color: #d8d8db;
                        // text-align: left;

                        .account {
                            font-size: px2rem(26);
                            font-weight: 400;
                            text-align: left;
                            margin-left: px2rem(30);
                            display: inline;
                        }

                        .last-login {
                            flex: 4;
                            font-size: px2rem(20);
                            margin-right: px2rem(30);
                            color: #698ab2;
                            // display: inline;
                            float: right;
                        }
                    }

                    .chevron-box {
                        position: absolute;
                        top: px2rem(55);
                        right: px2rem(10);
                        font-size: px2rem(24);
                        color: #d8d8db;

                        .chevron-up,
                        .chevron-down {
                            .bi-chevron-double-up,
                            .bi-chevron-double-down {
                                width: px2rem(30);
                                height: px2rem(30);
                            }
                        }
                    }
                }
            }
        }
    }

    .idcard-top-tips {
        position: relative;
        margin-top: -(px2rem(10));
        margin-bottom: px2rem(10);
        text-align: left;
        color: #d8d8db;
        font-size: px2rem(16);
    }

    .idcard-bottom-tips {
        text-align: center;
        color: rgba(45, 62, 80, 0.5);
        font-size: px2rem(16);
    }

    .custom-input {
        width: 100%;
        background-color: #161720;
        margin: px2rem(10) 0;
        border-radius: px2rem(4);
        box-sizing: border-box;
        height: px2rem(65);
        line-height: px2rem(65);
        text-align: left;
        padding: px2rem(8) px2rem(25);
        color: #d8d8db;
        font-size: px2rem(22);
        outline: none;
        border: none;
        caret-color: #d8d8db;
    }

    .large {
        width: 100%;
    }

    .large-btn {
        width: 100%;
        margin: px2rem(35) 0 px2rem(20) 0;
        background-color: #02bfff;
        border-radius: px2rem(4);
        box-sizing: border-box;
        height: px2rem(65);
        line-height: px2rem(65);
        text-align: center;
        color: #000304;
        letter-spacing: 1px;
        font-size: px2rem(26);
    }

    .idcard-margin {
        margin: px2rem(12) auto;
    }

    .idcard-bottom-tips {
        text-align: center;
        color: #d8d8db;
        font-size: px2rem(18);
        padding-top: px2rem(40);
    }
}
